<template>
    <view class="container">
        <view class="zhezhao" v-if="showMoreSelectState" @tap="closeZhezhao"></view>
        <view class="select_top" :style="'position:' + (componentState?'relative':'fixed')">
          <view class="select_tab" v-if="selectTab.length!=0">
            <view class="select_tab_item" v-for="(selectTabItem, index) in selectTab" :key="index" @click.stop="selectTabFun" :data-index="index">
                <text class="select_tab_item_text" :style="'color:' + (selectTabIndex==index?defaultColor:'')">{{selectResultsValue[selectTabItem.nameTwo?selectTabItem.nameTwo:selectTabItem.name]?selectResultsValue[selectTabItem.nameTwo?selectTabItem.nameTwo:selectTabItem.name]:selectTabItem.title}}</text>
                <image class="select_tab_item_icon" v-if="!selectTabItem.state" src="https://image1.sansancloud.com/jianzhan/2019_3/20/12/1/52_354.jpg?x-oss-process=style/preview_120"></image>
                <image class="select_tab_item_icon" v-else src="https://image1.sansancloud.com/jianzhan/2019_3/20/12/1/52_336.jpg?x-oss-process=style/preview_120"></image>
            </view>
            <!-- 下拉的选择样式 -->
            <scroll-view style="left: 0;" scroll-y class="select_tab_item_value" v-if="showMoreSelectState" :scroll-into-view="'tab_item_value_'+listPage.taskTypeId">
              <text class="select_tab_item_value_name" :style="'color:' + (listPage.groupId==0?defaultColor:'')" id="tab_item_value_0" data-index="-1" data-type="one" @click.stop="selectResultFun">全部</text>
              <text class="select_tab_item_value_name" :style="'color:' + (listPage.groupId==selectTabItemValues.id?defaultColor:'')" :id="'tab_item_value_'+selectTabItemValues.id" :data-item="selectTabItemValues" data-type="one" @click.stop="selectResultFun" v-for="(selectTabItemValues, index) in selectTab[selectTabIndex].listValues" :key="index">{{selectTabItemValues.name||selectTabItemValues.groupName}}</text>
            </scroll-view>
            <!-- 下拉的选择样式 -->
            <scroll-view style="right: 0;" scroll-y class="select_tab_item_value" v-if="showMoreSelectState" :scroll-into-view="'tab_item_value_'+listPage.taskTypeId">
              <text class="select_tab_item_value_name" :style="'color:' + (listPage.taskTypeId==0?defaultColor:'')" id="tab_item_value_0" data-type="two" data-index="-1" @click.stop="selectResultFun">全部</text>
              <text class="select_tab_item_value_name" :style="'color:' + (listPage.taskTypeId==taskTypeItem.id?defaultColor:'')" :id="'tab_item_value_'+taskTypeItem.id" :data-item="taskTypeItem" data-type="two" @click.stop="selectResultFun" v-for="(taskTypeItem, taskTypeIndex) in taskTypeList" :key="taskTypeIndex">{{taskTypeItem.name}}</text>
            </scroll-view>
          </view>
        </view>
        <view style="margin-top: 70rpx;">
            <task-list-component id="taskList"></task-list-component>
        </view>
        <view class="publish_block" :style="{background:defaultColor}" @tap="publishTaskFun" :animation="animationDataTwo">
            <image src="https://image1.sansancloud.com/xianhua/2020_6/18/16/41/48_92.jpg?x-oss-process=style/preview_120" class="publish_icon"></image>
        </view>
        <!-- 选择类型面板 -->
        <view class="zhezhao" v-if="showTaskTypeListState" @tap="closeZhezhaoTwo"></view>
        <view class="task_type_block" :animation="animationData">
            <scroll-view scroll-y class="task_type_list"  style='max-height:700rpx'>
                <block v-for="(taskTypeItem, taskTypeIndex) in taskTypeList" :key="taskTypeIndex">
                    <text class="task_type_item" :data-url="'create_task.html?taskTypeId=' + taskTypeItem.id" @tap="tolinkUrl">{{taskTypeItem.name}}</text>
                </block>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { socketFun } from "../../wxcomponents/public/json2Form";
export default {
  data() {
    return {
      taskList:null,
      taskTypeList:[],
      allTaskTypeList:[],
      taskGroupList:[],
      setting:null,
      positionTab:0,
      listPage:{
          page: 1,
          pageSize: 20,
          totalSize: 0,
          taskTypeId: 0,
          groupId:0,
      },
      secondColor:'',
      defaultColor:'',
      options:'',
      selectTab: [{
        title: '全部分类',
        type: 'pull-down',
        name: 'groupId',
        nameTwo: 'taskTypeId',
        state: false,
        value: '',
        listValues: []
      }, {
        title: '默认排序',
        value: '',
        type: 'pull-down',
        name: 'rank',
        state: false,
        listValues: []
      }],
      selectTabIndex: -1,
      showMoreSelectState:false,
      selectResultsValue: {},
      selectResultsObj: {},
      curItemData:null,
      showTaskTypeListState:false,
      animationData:null,
      animationDataTwo:null,
    };
  },
  props: {},

  /*onload*/
  onLoad: function (options) {
    let that=this;
    console.warn("======onLoad:options======", options, getApp().globalData.setting);
    that.getGroupData(options)
  },
  onReady: function () {
    
  },
  onShow: function () {
    let that=this;
	that.setData({
        setting:getApp().globalData.setting,
        defaultColor:getApp().globalData.setting.platformSetting.defaultColor,
        secondColor:getApp().globalData.setting.platformSetting.secondColor,
       })
  },
  /* 分享 app.js862行*/
  onShareAppMessage: function () {
    console.log(getApp().globalData.miniIndexPage);
    return getApp().globalData.shareForFx2(getApp().globalData.miniIndexPage);
  },
  onPullDownRefresh: function () {
    let that = this;
    that.selectComponent("#taskList").pullDownRefreshFun();
    wx.hideNavigationBarLoading(); //完成停止加载
    wx.stopPullDownRefresh(); //停止下拉刷新
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
    let that = this
    that.selectComponent("#taskList").reachBottomFun();
  },
  methods: {
    publishTaskFun:function(){
        console.log("==publishTaskFun===",);
        let that=this;
        let linkUrl=''
        if(that.listPage.taskTypeId){
            linkUrl='create_task.html?taskTypeId=' + that.listPage.taskTypeId;
            that.tolinkUrl(linkUrl)
        }else{
            that.animationFun();
        }
    },
    animationFun:function(){
        console.log("==animationFun===",);
        let that=this;
        let showTaskTypeListState=!that.showTaskTypeListState;
        that.setData({
          showTaskTypeListState: showTaskTypeListState,
        })
        let animation = wx.createAnimation({
          duration: 400,
          timingFunction: 'ease',
        })
        let animationTwo = wx.createAnimation({
          duration: 400,
          timingFunction: 'ease',
        })
        if (showTaskTypeListState) {
          animation.right('20rpx').step()
          animationTwo.right('70rpx').rotate('-90').step()
        } else {
          animation.right('-200rpx').step()
          animationTwo.right('20rpx').rotate('90').step()
        }
        that.setData({
          animationData: animation.export(),
          animationDataTwo: animationTwo.export(),
        })
    },
    closeZhezhaoTwo:function(){
        let that=this;
        that.animationFun()
    },
    selectResultFun: function (e) {
      let that = this;
      console.log("===selectResultFun===", e);
      let index = e.currentTarget.dataset.index; //选项的位置
      let type = e.currentTarget.dataset.type; //选项的类型
      let itemData=e.currentTarget.dataset.item;
      let indexFather = e.currentTarget.dataset.father; //tab的位置(更多里面点击时传的)
      let selectTabIndex = indexFather || that.selectTabIndex; //tab的位置
      let selectTab = that.selectTab; //tab数据
      let listPage = that.listPage; //搜索数据
      let selectResultsValue = that.selectResultsValue; //搜索数据
      let name=(type=='one'||!type)?selectTab[selectTabIndex].name:selectTab[selectTabIndex].nameTwo;
      console.log("=====name====",name,selectTabIndex,type)
      if (selectTab[selectTabIndex].type == 'pull-down') {
        if (index == -1) {
          if(type=='one'){
              that.setData({taskTypeList:that.allTaskTypeList})
          }
          console.log("======pull-down选择了全部=====");
          selectResultsValue[name] = "";
          listPage[name] = 0;
        } else {
          console.log("======pull-down选择了其他选项=====");
          if(type=='one'){
              that.setData({taskTypeList:itemData.taskTypes})
          }
          selectResultsValue[name] = itemData.name;
          listPage[name] = itemData.id;
        }
        if(type=='two'||!type){
            that.closeZhezhao();
            that.selectComponent("#taskList").getData(listPage);
        }
      } 
    },
    selectTabFun: function (e) {
      console.log("====selectTab====", e);
      let that = this;
      that.closeZhezhao();
      let selectTab = that.selectTab;
      let index = e.currentTarget.dataset.index;
      if (that.selectTabIndex != index) {
        for (let i = 0; i < selectTab.length; i++) {
          selectTab[i].state = false;
        }
        that.selectTab[index].state = true;
        that.setData({
          selectTab: selectTab,
          showMoreSelectState: true,
          selectTabIndex: index
        });
      } else {
        that.closeZhezhao();
      }
    },
    closeZhezhao: function () {
      let that = this;
      let selectTab = that.selectTab;
      that.setData({
        selectTabIndex: -1
      });
      for (let i = 0; i < selectTab.length; i++) {
        selectTab[i].state = false;
      }
      that.setData({
        showMoreSelectState: false,
        selectTab: selectTab
      });
    },
    bindTypeItem:function(index){
        let that=this;
        that.positionTab=index
        that.listPage.page=1;
        that.listPage.taskTypeId=that.taskTypeList[index].id
        that.selectComponent("#taskList").getData(that.listPage);
    },
    /* 获取数据 */
    getGroupData: function (param) {
      var that = this
      console.log("====param====",param)
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_task_type_groups.html")
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj.result
          let options={};
          let selectResultsValue=that.selectResultsValue;
          if (!dataArr || dataArr.length == 0) {
            that.setData({ taskGroupList: [] })
            options.groupId=0
          } else {
            for(let i=0;i<dataArr.length;i++){
                dataArr[i].name=dataArr[i].groupName
            }
            if(param.groupId){
                for(let i=0;i<dataArr.length;i++){
                    if(dataArr[i].id==param.groupId){
                       that.listPage.groupId=dataArr[i].id;
                       options.groupId=dataArr[i].id; 
                    }
                }
            }else{
                that.listPage.groupId=0
                options.groupId=0;
            }
            that.selectTab[0].listValues = dataArr;
            that.getTypeData(param)
            that.setData({ taskGroupList: dataArr,options:options,selectTab:that.selectTab})
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    /* 获取数据 */
    getTypeData: function (param) {
      var that = this
      console.log("====param====",param)
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_task_types.html")
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj
          let options={};
          let selectResultsValue=that.selectResultsValue;
          if (!dataArr || dataArr.length == 0) {
            that.setData({ taskTypeList: [] })
            options.taskTypeId=0
          } else {
            if(param.taskTypeId){
                for(let i=0;i<dataArr.length;i++){
                    if(dataArr[i].id==param.taskTypeId){
                       selectResultsValue['taskTypeId'] = dataArr[i].name;
                       that.listPage.taskTypeId=dataArr[i].id;
                       options.taskTypeId=dataArr[i].id; 
                    }
                }
            }else{
                that.listPage.taskTypeId=0
                options.taskTypeId=0
            }
            // that.selectTab[0].listValues = dataArr;
          }
          that.setData({ allTaskTypeList:dataArr,taskTypeList: dataArr,options:options,selectTab:that.selectTab})
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    /* 获取数据 */
    getData: function (param) {
      var that = this
      let params=Object.assign({},param,{
          taskStatus:-1
      })
      console.log("===params==",params)
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_tasks.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let data=res.data.relateObj.result
          that.listPage.pageSize = res.data.relateObj.pageSize
          that.listPage.page = res.data.relateObj.curPage
          that.listPage.totalSize = res.data.relateObj.totalSize
          let dataArr = that.taskList;
          let tagArray=[];
          for (let i = 0; i < data.length; i++) { 
            if (data[i].tags && data[i].tags != '') {
              try{
                  tagArray = JSON.parse(data[i].tags)
              }catch(e){
                  tagArray=[];
              }
              data[i].tagArray = tagArray;
            }
            if (data[i].managerTags && data[i].managerTags != '') {
              tagArray = JSON.parse(data[i].managerTags)
              if(data[i].payedPrice>0){
                  tagArray.splice(tagArray.length,1,'已交定金')
              }
              data[i].managerTagArray = tagArray;
            }
          }
          console.log("===data====",data)
          if (param.page == 1) {
            dataArr = []
          }
          if (!data || data.length == 0) {
            that.setData({ taskList: null })
          } else {
            if (dataArr == null) { dataArr = [] }
            dataArr = dataArr.concat(data)
            that.setData({ taskList: dataArr })
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    /* 组件事件集合 */
    tolinkUrl: function (e) {
      console.warn("=======e=======", e);
      let linkUrl = e.currentTarget?e.currentTarget.dataset.url:e;
      getApp().globalData.linkEvent(linkUrl);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>